<html>
<head>
	<title>Test</title>
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	
	<link rel="stylesheet" type="text/css" href="style.css"/>
<head>
<body>
</body>
	<div id="scrollable-images">
		<div class="scrollable">
			<div class="items">
				<div data="images/01.jpg">
					<img src="images/01.jpg"/>
				</div>
				<div data="images/02.jpg">
					<img src="images/02.jpg"/>
				</div>
				<div data="images/03.jpg">
					<img src="images/03.jpg"/>
				</div>
				<div data="images/04.jpg">
					<img src="images/04.jpg"/>
				</div>
			</div>
		</div>
		<a class="prev"></a>
		<a class="next"></a>
	</div>
	
	<div id="slide-show"></div>
	
	<script src="../lib/jquery.tools.min.js"></script>
	<script type="text/javascript" src="../src/fbss.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(".scrollable").scrollable({
				circular: true
			});
			
			$(".scrollable .items div").click(function(){
				$("#slide-show").fbss({
					scrollable: ".scrollable",
					controls: false,
					mask: {
						color: '#000000',
						loadSpeed: 0,
						opacity: 0.8
					}
				}).displayCurrent();
			});
		});
	</script>
	
</html>